---
slug: webpack性能优化 #路径，不能重复
title: webpack性能优化 # 标题
authors: [] # 作者，在authors.yml配置
tags: [facebook, hello, docusaurus] # 标签，在tags.yml配置
toc_min_heading_level: 2 # 最小展示标题
toc_max_heading_level: 5 # 最大展示标题
---

import {dataSource,columns} from "@site/src/components/MdxComp/comp/table-data/prefetchPreload.js";

### 代码分离

> 所有的打包都会打包到bundle.js中，会导致打包的文件很大

#### 多入口

> 假设有index.js和main.js两个入口文件

`[name]-bundle.js`意思是使用entry的key实现多bundle.js

```js title="webpack.config.js"
const path = require("node:path");
module.exports = {
    entry: {//配置多入口
        index: "./src/index.js",
        main: "./src/main.js",
    },
    devtool: "source-map",
    output: {
        filename: "[name]-bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
}
```

##### 如果多入口文件存在一些包是共享的

> index共享axios和dayjs，main共享dayjs

```js title="webpack.config.js"
module.exports = {
    optimization: {
        runtimeChunk: 'single',
    },
    mode: "development",
    entry: {//配置多入口
        index: {
            import: "./src/index.js",
            dependOn: 'shared'
        },
        main: {
            import: "./src/main.js",
            dependOn: 'shared1'
        },
        shared: ['axios','dayjs'],
        shared1: ['dayjs']
    },
    devtool: "source-map",
    output: {
        filename: "[name]-bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
    },
}

```


### 动态导入

> 只有再需要的时候导入文件

```js title="index.js"
const btn = document.createElement("button");
btn.textContent = "about";
document.body.appendChild(btn);
btn.addEventListener("click", ()=>{
    import('./router/about');
});

```

#### 动态导入的文件命名

```js title="webpack.config.js"
module.exports = {output: {
        filename: "[name]-bundle.js",//输出文件名
        path: path.resolve(__dirname, "../dist"),//必须是一个绝对路径
        chunkFilename: "[name]-chunk.js"//动态导入的包重命名
    },
}

```

##### webpack魔法注释

> chunkFilename的name默认是路径+文件名，我们可以使用webpack的魔法注释来指定name

```js title="index.js"

btn.addEventListener("click", ()=>{
    import(/*webpackChunkName:"about"*/'./router/about').then((res)=>{
        console.log(res.default);
    });
});
```

**`/*webpackChunkName:"name"*/`这个注释是固定的**


### SplitChunks

> 分包

```js title="webpack.config.js"
module.exports = {
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all'
        }
    }
}
```

`optimization.splitChunks`

1. maxSize : 当一个包大于指定的大小（byte）时，继续进行拆包

2. minSize: 将包拆分成不小于minsize的包

3. cacheGroups:自定义分包，语法是`{key:value,key1:value1}`
    ```js
    cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    filename: '[name].[hash:8]-vendor.js'
                }
            }
    ```

#### optimization.chunkIds
> 告诉webpack对于模块的id采用什么样的算法

* natural 按照数字的顺序使用id
* named development下的默认值，一个可读的名称的id
* deterministic 确定性的，在不同的编译中不变的短数字的id


### prefetch和preload

* prefetch(预获取):将来某些导航下可能需要的资源

* preload(预加载):当前导航下可能需要资源

<TableComp columns={columns} datasource={dataSource}/>


```js
import(/*webpackChunkName:"about",webpackPrefetch:true*/'./router/about').then((res)=>{
        console.log(res.default);
    });

```

